// 自动聚焦指令
Vue.directive('focus',{
    inserted:function(el){
        el.focus();
    }
});

// 底部导航栏
var bottomNav = {
    template: '<div class="bottom-nav-wrapper" v-if="bottomNavShow">'
    + '<ul class="bottom-nav">'
    + '<li v-for="(item,index) in navList" :class="{active:currentIndex == index}" @click="clickNav(index)">'
    + '<span class="iconfont" :class="item.icon"></span>'
    + '<span>{{item.name}}</span>'
    + '</li>'
    + '</ul>'
    + '</div>',
    props: ['bottomNavData'],
    data: function () {
        return {
            currentIndex: 0,
            navList: [
                {name: '主页', icon: {'icon-zhuye': true}, navTo: 'index.html'},
                {name: '共享', icon: {'icon-share-copy': true}, navTo:'share.html'},
                {name: '美图', icon: {'icon-tupian': true}, navTo: 'beautyImg.html'},
                {name: '我的', icon: {'icon-zhuye1': true}, navTo: 'mine.html'},
            ],
            bottomNavShow: true,
        }
    },
    methods: {
        clickNav: function (index) {
            this.currentIndex = index;
            var newHref = this.navList[index].navTo;
            g.window.openNew(g.url.urlHref('/page/' + newHref));
        },
        checkCurrentNav:function(){
            var _this = this;
            var currentHref = location.href;

            this.navList.forEach(function(item,i){
                if(currentHref.indexOf(item.navTo) > 0){
                   _this.currentIndex = i;
                }
            });
        }
    },
    mounted: function () {
        this.currentIndex = 99;
        this.checkCurrentNav();
    }
};
Vue.component('bottom-nav',bottomNav);

// 公共遮罩层
var commonMask = {
    template: '<div class="common-mask-wrapper" @click="close">'
    + '<div class="common-mask-mask"></div>'
    + '</div>',
    props: [],
    data: function () {
        return {}
    },
    methods: {
        close: function () {
            this.$emit('close');
        }
    },
    mounted: function () {
    }
};
Vue.component('common-mask',commonMask);

//顶部Tab切换及搜索图标 
var topTabBar = {
    template:'<div class="top-tab-bar-wrapper">'
    +  '<div class="top-tab-bar">'
    +    '<div class="top-tab">'
    +        '<p class="tab-item" :class="{active:currentTab == 1}" @click="toggleTab(1)">{{topTabBarData.tab1}}</p>'
    +        '<p class="tab-item" :class="{active:currentTab == 2}" @click="toggleTab(2)">{{topTabBarData.tab2}}</p>'
    +    '</div>'
    +    '<span class="iconfont icon-iconfont" @click="toSerach"></span>'
    +  '</div>'
    +'</div>',
    props: ['topTabBarData'],
    data: function () {
        return {
            currentTab:1
        }
    },
    methods: {
        toggleTab:function(index){
           $('body').scrollTop(0);
           this.currentTab = index;
           this.$emit('tabchange',index);
        },
        toSerach:function(){
            g.window.openNew(g.url.urlHref('/page/searchPage.html?type='+this.topTabBarData.searchType));
        }
    },
    mounted: function () {
      
    }
};

// 实拍图轮播
var photoSwiper = {
    template:'<div class="photo-swiper-wrapper">'
    +   '<div class="photo-swiper swiper-container">'
    +       '<ul class="swiper-wrapper">'
    +           '<li class="swiper-slide" v-for="item in photoSwiperData.photoList">'
    +               '<div class="swiper-slide-img">'
    +                   '<img :src="item.imgSrc">'
    +               '</div>'
    +           '</li>'
    +       '</ul>'
    +       '<div class="fav-btn" @click="fav">'
    +           '<span class="iconfont icon-aixin-copy"></span>'
    +        '</div>' 
    +   '</div>'  
    +'</div>',
    props: ['photoSwiperData'],
    data:function(){
        return {
           totalNum:0,
           currentNum:1,
           currentPhotoId:null,
        }
    },
    methods:{
      getInitData:function(){
          var _this = this;
          this.totalNum =  _this.photoSwiperData.photoList.length;
          _this.currentPhotoId = _this.photoSwiperData.photoList[0].id;
          _this.initSwiper();
      },
      initSwiper:function(){
        var _this = this;
        var lastIndex = _this.photoSwiperData.photoList.length -1;
        var swiperLength = $('.ykl-layout').width()*lastIndex;
        var photoSwiper = new Swiper('.swiper-container', {
            observer:true,
            observeParents:true,
            onSliderMove:function(swiper){   
            },
            onTouchEnd:function(swiper){
              if(swiper.activeIndex == 0 && swiper.translate > 50){
                  g.modal.waiting({title:'已到第一张'});
              }
              if(swiper.activeIndex == lastIndex  && swiper.translate < -swiperLength){
                  g.modal.waiting({title:'已到最后一张'});
              }
              _this.currentPhotoId = _this.photoSwiperData.photoList[swiper.activeIndex].id;
            },
            onTransitionEnd: function(swiper){
                _this.currentNum = swiper.activeIndex + 1; 
            }
        }); 
      },
      fav:function(){
        this.$emit('fav',this.currentPhotoId,this.currentNum-1);
      }
    },
    mounted:function(){
      this.getInitData(); 
    },
};